<template>
  <div class="about">
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="studentname" placeholder="请输入学生姓名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch()">搜索</el-button>
        <el-button type="warning" @click="onAdd()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号"/>
      <el-table-column prop="studentname" label="学生姓名"  />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="address" label="家庭住址" />
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column >
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-count="pages"
        @current-change="pageChange"
    />


    <!--弹框-->
    <el-dialog
        :destroy-on-close = true
        v-model="dialogVisible"
        title="新增/修改学生信息"
        width="30%"
        :before-close="handleClose"
    >

      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="学生姓名" prop="studentname">
          <el-input v-model="ruleForm.studentname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age" />
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="ruleForm.address" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            提交
          </el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>


  </div>
</template>

<script>

import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";
import {ElMessage,ElMessageBox} from 'element-plus'
import axios from "axios";

export default {
  name: 'AboutView',
  setup() {
    const {proxy} = getCurrentInstance();
    const data = reactive({
      studentname: '',
      pageNum: 1,
      total: 0,
      pages: 0,
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        studentname: '',
        gender: '',
        age: '',
        address: ''
      },

      rules:{
        studentname: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { pattern :/^(1[8-9]|[2-9]\d)$/,message: '必须是18-99之间的数字', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入家庭地址', trigger: 'blur' },
        ],
      }
    })

    const onSearch = () => {
      axios({
        url: '/api/student/page?studentname=' + data.studentname + '&pageNum=' + data.pageNum,
        method: 'get'
      }).then(function (res) {

        data.tableData = res.data.data.records
        data.pageNum = res.data.data.current
        data.total = res.data.data.total
        data.pages = res.data.data.pages
      })
    }

    const onAdd = () => {
      data.dialogVisible = true
      data.ruleForm = {}
    }

    const edit = (row) => {
      data.dialogVisible = true
      data.ruleForm = row

    }

    const del = (id) => {

      ElMessageBox.confirm(
          '确认删除吗?',
          '删除提示框',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            axios.delete("/api/student/del/"+id).then((result) =>{
              if (result.data.code == "200"){
                ElMessage.success("操作成功！")
                onSearch()
              }else {
                ElMessage.error("操作失败")
              }
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消成功',
            })
          })
    }

    const pageChange = (pageNum) => {
      data.pageNum = pageNum
      onSearch()
    }


    const submitForm = () => {
      proxy.$refs["ruleFormRef"].validate((valid) => {
        if (valid) {
          axios.post("/api/student/savaOrUpd",data.ruleForm).then((result) => {
            if (result.data.code == "200"){
              ElMessage.success("操作成功！")
              data.dialogVisible = false
              onSearch()
            }else {
              ElMessage.error("操作失败")
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }

    const resetForm = () => {
      proxy.$refs["ruleFormRef"].resetFields();
    }




    onMounted(() =>{
      onSearch()
    })

    return{
      ...toRefs(data),
      onSearch,
      onAdd,
      edit,
      del,
      pageChange,
      submitForm,
      resetForm
    }
  }
}

</script>


